<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue指令2</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{name}}</h1>
    <img v-show="showflag" src="./img/xww.jpg" alt=""><br>
    <input type="button" value="使用v-show方法一：点击看美女" @click="ChangeshowFlag"><br>

    <input type="button" value="使用v-show方法二：点击够次数看美女" @click="add">
    <span>美女现在已经{{cout}}岁了</span>
    <img v-if="cout>18" src="./img/xww.jpg" alt=""><br>

    <img v-if="ifflag" src="./img/xww.jpg" alt=""><br>
    <input type="button" value="使用v-if方法一：点击看美女" @click="ChangeifFlag">


</div>


<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            name:"这是一个用npm方式搭建的工程",
            cout:10,
            showflag:false,
            ifflag:true
        },
        methods: {
            ChangeshowFlag: function () {
                this.showflag = !this.showflag;
            },
            ChangeifFlag: function () {
                this.ifflag = !this.ifflag;
            },
            add: function () {
                this.cout++;
                if (this.cout > 60) {
                    alert("以及达到最大值");
                    this.cout = 10;
                }
            },
        }
    });
</script>
</body>
</html>